<!-- 收益情况组件 -->
<template>
  <div class="revenue-chart-container">
    <div
      id="revenueChartContainer"
      ref="revenueChartContainer"
      class="chart-container" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

// 注册ECharts组件
echarts.use([
  TooltipComponent,
  LegendComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
]);

const revenueChartContainer = ref<HTMLElement>();
let revenueChart: echarts.ECharts;
let resizeObserver: ResizeObserver | null = null;
const handleWindowResize = () => {
  revenueChart?.resize();
};

// 静态收益数据
const revenueData = {
  dates: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"],
  thisMonth: [12000, 15000, 18000, 16000, 22000, 25000, 28000],
  lastMonth: [10000, 12000, 14000, 13000, 18000, 20000, 23000],
};

// 图表配置
const getChartOption = () => {
  return {
    color: ["#0052D9", "#00A870"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
      formatter: function (params: any) {
        let result = `${params[0].axisValue}<br/>`;
        params.forEach((item: any) => {
          result += `${item.marker}${
            item.seriesName
          }: ¥${item.value.toLocaleString()}<br/>`;
        });
        return result;
      },
    },
    legend: {
      data: ["本月收益", "上月收益"],
      bottom: 10,
      textStyle: {
        color: "#666",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "15%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: revenueData.dates,
      axisLabel: {
        color: "#666",
      },
      axisLine: {
        lineStyle: {
          color: "#e6e6e6",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#666",
        formatter: function (value: number) {
          return "¥" + value / 1000 + "k";
        },
      },
      splitLine: {
        lineStyle: {
          color: "#f0f0f0",
        },
      },
    },
    series: [
      {
        name: "本月收益",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 3,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.1,
        },
        emphasis: {
          focus: "series",
        },
        data: revenueData.thisMonth,
      },
      {
        name: "上月收益",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 3,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.1,
        },
        emphasis: {
          focus: "series",
        },
        data: revenueData.lastMonth,
      },
    ],
  };
};

// 初始化图表
const initChart = () => {
  if (revenueChartContainer.value) {
    revenueChart = echarts.init(revenueChartContainer.value);
    revenueChart.setOption(getChartOption());

    // 监听窗口大小与容器尺寸变化（解决标签页切换后宽度为0的问题）
    window.addEventListener("resize", handleWindowResize);
    resizeObserver = new ResizeObserver(() => {
      revenueChart?.resize();
    });
    resizeObserver.observe(revenueChartContainer.value);
  }
};

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  if (revenueChart) {
    revenueChart.dispose();
  }
  window.removeEventListener("resize", handleWindowResize);
  if (resizeObserver) {
    resizeObserver.disconnect();
    resizeObserver = null;
  }
});
</script>

<style lang="less" scoped>
.revenue-chart-container {
  width: 100%;
  height: 100%;

  .chart-container {
    width: 100%;
    height: 260px;
    min-height: 260px;
  }
}
</style>
